<!--
 * @Author: Rain
 * @Date: 2023/10/07 13:54:43
 * @LastEditTime: 2023/11/27 22:03:54
 * @Description: Do Something
-->
<template>
  <div class="w-full h-full p-16 box-border flex flex-col">
    <div class="w-full flex items-center mb-10">
      <div class="flex items-center mr-30">
        <span class="mr-10 font-bold">打卡班级:</span>
        <el-select v-model="grade" placeholder="请选择班级">
          <el-option
            v-for="c in classList"
            :key="c.classNo"
            :label="c.name"
            :value="c.classNo"
          />
        </el-select>
      </div>
      <div class="flex items-center mr-30">
        <span class="mr-10 font-bold">打卡时间:</span>
        <span>{{ item.startDate }}</span>
        <span class="mx-[20px]">-</span>
        <span>{{ item.endDate }}</span>
      </div>
      <div class="flex items-center">
        <span class="mr-10 font-bold">班级人数:</span>
        <span>{{ item.userNumber }}人</span>
      </div>
    </div>
    <FullCalendar ref="calendar" :options="options" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import Locale from '@fullcalendar/core/locales/zh-cn'
import { initData } from '@/api/data'
export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      options: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'today,prev,next'
        },
        height: '100%',
        initialView: 'dayGridMonth',
        editable: false,
        selectable: false,
        selectMirror: false,
        dayMaxEvents: true,
        weekends: true,
        locale: Locale,
        dateClick: this.dayClick,
        defaultAllDay: true,
        validRange: {
          start: '',
          end: ''
        }
      },
      grade: '',
      item: {},
      classList: []
    }
  },
  watch: {
    grade(val) {
      const item = this.classList.find((item) => item.classNo === val)
      this.item = item
      // this.options.validRange = {
      //   start: dayjs(item.startDate).format('YYYY-MM-DD'),
      //   end: dayjs(item.endDate).format('YYYY-MM-DD')
      // }
      // this.$refs.calendar.fireMethod('option', 'validRange', {
      //   start: dayjs(item.startDate).format('YYYY-MM-DD'),
      //   end: dayjs(item.endDate).format('YYYY-MM-DD')
      // })
      // this.$refs.calendar.fireMethod(
      //   'option',
      //   'defaultDate',
      //   dayjs(item.startDate).format('YYYY-MM-DD')
      // )
    }
  },
  mounted() {
    initData('api/courseClass/getAll').then((res) => {
      this.classList = res
      this.grade = this.classList[0].classNo
    })
  },
  methods: {
    dayClick(e) {
      if (!this.grade) {
        this.$message({
          message: '请先选择班级',
          type: 'error'
        })
        return
      }
      const { dateStr } = e
      this.$router.push({
        path: '/course/record',
        query: { timeStr: dateStr, classNo: this.grade }
      })
    }
  }
}
</script>
<style scoped lang="scss"></style>
